<template>
  <div class="article-list">
    <!-- 
      v-model 控制是否下拉中效果
      refresh 刷新事件逻辑
     -->
    <van-pull-refresh v-model="isLoading"  :success-text="successText" @refresh="onRefresh">
      <!-- 
        【属性】
        v-model 绑定的变量是用于控制是否显示loading加载状态效果
        finished 属性绑定的变量用于控制是否还可以滚动加载
        finished-text 属性展示不在加载后的显示文本内容
        【事件】
        load 事件
        1.页面一打开就会自动触发load绑定的事件，且将loading效果展示出来，直到页面内容铺满为止才不会调用load事件，没有铺满会继续调用load事件
        2.页面滚动到底部的时候，再次会自动触发load事件
      -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        :error.sync="error"
        @load="onLoad"
      >
        <!-- 列表项组件 -->
        <article-item  v-for="(item,index) in list" :key="index" :article="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import ArticleItem from '@/components/article-item'
export default {
  components: {
    ArticleItem
  },
  name: "ArticleList",
  data() {
    return {
      successText:'刷新成功',
      isLoading:false,    // 是否处于下拉中
      list: [],          // 列表
      loading: false,    // 控制是否显示加载中 
      error:false,       // 是否加载出错
      finished: false,    // 结束滚动加载
      timestamp: Date.now()   // 时间戳，用于获取每页数据，类似页码的功能
    };
  },
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 加载数据
    async onLoad() {
      // 1.发送数据请求
      try {
          let { data:res } = await getArticles({
            channel_id:this.channel.id,   // 频道的ID
            timestamp: this.timestamp,  // 时间戳
            with_top:1     // 是否包含置顶信息
          })
          // 2.将数据追加到列表中去
          let results = res.data.results
          this.list.push(...results)
          // 3.关闭加载框
          this.loading = false
          // 4. 更换页码   更换timestamp的值，便于下页数据请求
          this.timestamp = res.data.pre_timestamp
          // 5.判断数据是否全部加载完成
          if(results.length<10){
            this.finished = true
          }
      } catch (error) {
        this.$toast.fail('获取频道列表数据失败')
        this.error = true
      }
    },
    // 下拉刷新
    async onRefresh(){
      // 思路： 获取最新的数据，放在列表的顶部，成功后关闭下拉
      // 1.发送数据请求
      try {
          let { data:res } = await getArticles({
            channel_id:this.channel.id,   // 频道的ID
            timestamp: Date.now(),  // 时间戳  【最新数据】
            with_top:1     // 是否包含置顶信息
          })
          // 2.将数据追加到列表的顶部
          let results = res.data.results
          this.list.unshift(...results)
          // 提示文字修改
          this.successText = `为您刷新了${results.length}条数据`

          // 3.关闭下拉效果
          this.isLoading = false
          
      } catch (error) {
        this.$toast.fail('获取最新数据出错')
      }
    }
  }
};
</script>

<style lang="less" scoped>
.article-list{
  overflow-y: scroll;
  height: 79vh;
}
</style>
